<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 - 页面未找到</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#64748B',
                        dark: '#1E293B'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .animate-float {
                animation: float 6s ease-in-out infinite;
            }
            .animate-pulse-slow {
                animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            }
        }
        
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
            100% { transform: translateY(0px); }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-slate-50 to-slate-100 min-h-screen flex flex-col items-center justify-center p-4 font-sans text-dark">
    <!-- 404数字动画 -->
    <div class="text-[clamp(8rem,20vw,15rem)] font-bold text-primary/20 relative mb-6 animate-float">
        <span class="absolute inset-0 text-primary/80 text-shadow">404</span>
    </div>
    
    <!-- 错误信息卡片 -->
    <div class="bg-white rounded-2xl shadow-xl p-8 md:p-12 max-w-md w-full transform transition-all hover:shadow-2xl">
        <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-center mb-4 text-dark">页面未找到</h1>
        <p class="text-secondary text-center mb-8">抱歉，您请求的页面不存在或已被移动</p>
        
        <!-- 图标 -->
        <div class="flex justify-center mb-8">
            <i class="fa fa-compass text-5xl text-primary/70 animate-pulse-slow"></i>
        </div>
        
        <!-- 操作按钮 -->
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <a href="#" class="bg-primary hover:bg-primary/90 text-white font-medium py-3 px-6 rounded-lg transition-all transform hover:scale-105 text-center">
                <i class="fa fa-home mr-2"></i>返回首页
            </a>
            <a href="javascript:history.back()" class="bg-white border border-slate-200 hover:border-primary hover:text-primary text-slate-700 font-medium py-3 px-6 rounded-lg transition-all transform hover:scale-105 text-center">
                <i class="fa fa-arrow-left mr-2"></i>返回上一页
            </a>
        </div>
    </div>
    
    <!-- 页脚 -->
    <footer class="mt-12 text-center text-secondary/70 text-sm">
        <p>© 2023 您的网站名称 - 发生错误但别担心，我们一直在改进</p>
    </footer>
    
    <script>
        // 添加页面载入动画
        document.addEventListener('DOMContentLoaded', () => {
            document.body.classList.add('opacity-100');
            document.body.classList.remove('opacity-0');
        });
    </script>
</body>
</html>
